 <template>
  <div class="box1">
    <h1>工作人员管理,展示工作人元页面</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="会员手机">
        <el-input
          v-model="formInline.user"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary" @click="dialogTableVisible = true"
          >新增工作人员</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%" align="center">
      <el-table-column prop="id" label="员工id" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="username"
        label="员工姓名"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="password"
        label="员工账号"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="phone" label="员工电话" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="修改信息"
        align="center"
      >
        <template slot-scope="" class="fexl">
          <el-button type="text" @click="xiugai">修改密码或电话</el-button>
          <el-button type="text" @click="dialogTableVisible = true"
            >删除员工</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="fenye">
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
      </div>
      <el-dialog
        title="修改员工信息"
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="false"
      >
        <!-- 添加用户的表单 -->
        <el-form ref="addFormRef" :model="addUser" label-width="100px">
          <el-form-item prop="username" label="员工工号">
            <el-input v-model="addUser.username"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="员工账号">
            <el-input v-model="addUser.password"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="账号密码">
            <el-input v-model="addUser.email"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="员工电话">
            <el-input v-model="addUser.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogTableVisible = false">取消</el-button>
            <el-button type="primary">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "",
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          id: "2016-05-02",
          username: "王小虎",
          phone: 136,
        },
      ],
      dialogTableVisible: false, // 添加用户弹框
      // 添加用户
      addUser: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
    };
  },
  created() {
    console.log("生命周期的监听"),
      this.getEmployeeInformationList(),
      this.postQueryAllEmployees(),
      this.DeleteStaff(),
      this.UpdateStaff();
  },
  methods: {
    //对接获取员工工作列表消息
    getEmployeeInformationList() {
      const that = this;

      axios
        .get("http://lime.api.hipencil.cc/selectAllUser", {
          params: {}, //需要传参数
        })
        .then(function (response) {
          console.log("获取到所有员工的信息", response.data.data);
          //将获取到的后端数据进行赋值
          that.tableData = response.data.data;
        });
    },
    //对接查询所有员工
    postQueryAllEmployees() {
      axios
        .get("http://lime.api.hipencil.cc/selectUserByPhone", {
          params: {
            phone: "手机号",
          },
        })
        .then(function (response) {
          console.log("获取到根据手机号查询的信息", response);
        });
    },
    //对接删除员工的接口
    DeleteStaff() {
      const that = this;
      axios
        .post("http://lime.api.hipencil.cc/deleteUserById", {
          params: {
            id: "",
          },
        })
        .then(function (response) {
          console.log("删除员工的接口", response);
          if (response.code === 200) {
            that.$message.succsee(response.msg);
          } else {
            that.$message.error(response.msg);
          }
        });
    },
    xiugai(row) {
      console.log("拿到改行所有信息", row);
    },
    //更新员工的接口
    UpdateStaff() {
      axios
        .post("http://lime.api.hipencil.cc/updateUserById", {
          params: {
            id: "",
          },
        })
        .then(function (response) {
          console.log("更新员工的接口", response);
        });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ form,
h1 {
  text-align: left;
}

.box1 {
  // padding: 139px;
  padding-left:20px;
}

/deep/ .el-table td.el-table__cell div {
  box-sizing: border-box;
  display: flex;
}
</style>